<template>
  <div class="home">
    <van-row>
      <van-col span="3" offset="1"><van-icon name="arrow-left" /></van-col>
      <van-col span="16"
        ><div class="inp"><input type="text" class="input" /></div
      ></van-col>
      <van-col span="4">图表<van-icon name="arrow" /></van-col>
    </van-row>
    <van-row>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swiperData" :key="item.id"
          ><van-image :src="item.pic" Lazyload class="imgs"
        /></van-swipe-item>
      </van-swipe>
    </van-row>
    <van-grid>
      <van-grid-item v-for="item in gridData" :key="item.id" class="grid">
        <router-link tag="van-grid-item" :to="'/detail/'+item.id">
          <van-image :src="item.pic" Lazyload class="t-img" />
           </router-link>
          <span class="title">{{ item.title }}</span>
       
      </van-grid-item>
    </van-grid>
    <van-tabs v-model="active">
      <van-tab>
        <template #title> 分类 <van-icon name="arrow-down" /></template>

        <div class="con1">
          <div class="t-left">
            <van-image
              src="http://localhost:8080/imgs/dinnerdetail/food1.jpg"
              Lazyload
              class="t-imgs"
            />
          </div>
          <div class="t-right">
            <div class="t-ms">江户前寿司</div>
            <div class="t-fen"><van-rate v-model="value1" />4.8分</div>
            <div class="t-title">匠心精做海鲜豪华刺身拼盘</div>
            <div class="t-num">
              <van-icon name="guide-o" />日本料理<van-icon name="contact" />34人
            </div>
            <div class="t-address">
              <van-icon name="location-o" />嵩文门<van-icon name="arrow" />780m
            </div>
          </div>
        </div>
        <div class="con1">
          <div class="t-left">
            <van-image
              src="http://localhost:8080/imgs/dinnerdetail/food1.jpg"
              Lazyload
              class="t-imgs"
            />
          </div>
          <div class="t-right">
            <div class="t-ms">江户前寿司</div>
            <div class="t-fen"><van-rate v-model="value2" />4.8分</div>
            <div class="t-title">匠心精做海鲜豪华刺身拼盘</div>
            <div class="t-num">
              <van-icon name="guide-o" />日本料理<van-icon name="contact" />34人
            </div>
            <div class="t-address">
              <van-icon name="location-o" />嵩文门<van-icon name="arrow" />780m
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab>
        <template #title> 区域 <van-icon name="arrow-down" /></template>
        <div>区域</div>
      </van-tab>
      <van-tab>
        <template #title> 排序 <van-icon name="arrow-down" /></template>
        <div>排序</div>
      </van-tab>
      <van-tab>
        <template #title> 筛选 <van-icon name="arrow-down" /></template>
        <div>筛选</div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref } from "vue";
//局部组件
import { Tab, Tabs } from "vant";
import { Rate } from "vant";
export default {
  name: "Home",
  components: {},
  setup() {
    const value = ref(3);
    return { value };
  },
  data() {
    return {
      gridData: [
        {
          id: 1,
          title: "聚餐嘉请",
          pic: "http://localhost:8080/imgs/index/a1.png",
        },
        {
          id: 2,
          title: "聚餐嘉请",
          pic: "http://localhost:8080/imgs/index/a2.png",
        },
        {
          id: 3,
          title: "聚餐嘉请",
          pic: "http://localhost:8080/imgs/index/a3.png",
        },
        {
          id: 4,
          title: "聚餐嘉请",
          pic: "http://localhost:8080/imgs/index/a4.png",
        },
        { id: 5, title: "1", pic: "http://localhost:8080/imgs/index/a5.png" },
        {
          id: 6,
          title: "聚餐嘉请",
          pic: "http://localhost:8080/imgs/index/a6.png",
        },
        {
          id: 7,
          title: "聚餐嘉请",
          pic: "http://localhost:8080/imgs/index/a7.png",
        },
        {
          id: 8,
          title: "聚餐嘉请",
          pic: "http://localhost:8080/imgs/index/a8.png",
        },
      ],
      swiperData: [
        { id: 1, pic: "http://localhost:8080/imgs/index/c1.jpg" },
        { id: 2, pic: "http://localhost:8080/imgs/index/c2.jpg" },
        { id: 3, pic: "http://localhost:8080/imgs/index/c3.jpg" },
        { id: 4, pic: "http://localhost:8080/imgs/index/c4.jpg" },
      ],
      active: "",
      value1: 3,
      value2: 3,
    };
  },
  components: {
    //注册局部组件
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Rate.name]: Rate,
  },

};
</script>
<style scoped>
.home {
  background: skyblue;
  height: 2.666667rem;
  line-height: 2.666667rem;
}
.inp .input {
  height: 1.733333rem;
  border-radius: 0.666667rem;
}
.my-swipe {
  height: 10rem;
  width: 100%;
}
.imgs {
  width: 100%;
  height: 10rem;
}
.grid {
  width: 100%;
}
.grid .t-img {
  width: 50%;
}
.grid .title {
  color: black;
  font-size: 0.106667rem;
  text-align: center;
}
.con1 {
  width: 100%;
  display: flex;
}
.con1 .t-left {
  width: 50%;
}
.con1 .t-left .t-imgs {
  width: 100%;
}
.con1 .t-right {
  width: 50%;
}
.con1 .t-right .t-ms {
  width: 100%;
  height: 0.4rem;
  color: black;
  font-size: 0.133333rem;
  line-height: 0.666667rem;
}

.con1 .t-right .t-fen {
  width: 100%;
  height: 1.333333rem;
  color: black;
  font-size: 0.133333rem;
}
.con1 .t-right .t-title {
  height: 1.333333rem;
  width: 100%;
  color: black;
  font-size: 0.133333rem;
}
.con1 .t-right .t-num {
  height: 1.333333rem;
  width: 100%;
  color: black;
  font-size: 0.133333rem;
}
.con1 .t-right .t-address {
  height: 1.333333rem;
  width: 100%;
  color: black;
  font-size: 0.133333rem;
}
</style>
